<template>
	<view class="detailParking-container">
		<view class="card Parking">
			<view class="cardTitle">
				<text class="iconfont icon-icon-test8"></text>
				<text>车位信息</text>
			</view>
			<view class="cardItem">
				<view class="cardItemL">
					<text class="iconfont icon-icon-test39"></text>
					<text>车位编号</text>
				</view>
				<view class="cardItemR">
					<text>{{packingInfo.parkingNum}}</text>
				</view>
			</view>
			<view class="cardItem">
				<view class="cardItemL">
					<text class="iconfont icon-icon-test29"></text>
					<text>车位类型</text>
				</view>
				<view class="cardItemR">
					<text>{{packingInfo.parkingType}}</text>
				</view>
			</view>
			<view class="saleRentalStatus">
				<view class="saleStatus">
					{{packingInfo.sale == 1 ? '正在出售' : '尚未出售'}}
				</view>
				<view class="rentalStatus">
					{{packingInfo.rentOut == 1 ? '正在出租' : '尚未出租'}}
				</view>
			</view>
		</view>
		<view class="card Owner">
			<view class="cardTitle">
				<text class="iconfont icon-icon-test35"></text>
				<text>物主信息</text>
			</view>
			<view class="cardItem">
				<view class="cardItemL">
					<text class="iconfont icon-icon-test13"></text>
					<text>物主姓名</text>
				</view>
				<view class="cardItemR">
					<text>{{packingInfo.parkingOwnerName}}</text>
				</view>
			</view> 
			<view class="cardItem">
				<view class="cardItemL">
					<text class="iconfont icon-icon-test24"></text>
					<text>电话号码</text>
				</view>
				<view class="cardItemR">
					<text>{{packingInfo.parkingOwnerPhone}}</text>
				</view>
			</view> 
		</view>
		<view class="card Rental">
			<view class="cardTitle">
				<text class="iconfont icon-icon-test37"></text>
				<text>承租信息</text>
			</view>
			<view class="cardItem">
				<view class="cardItemL">
					<text class="iconfont icon-icon-test13"></text>
					<text>租客姓名</text>
				</view>
				<view class="cardItemR">
					<text>{{packingInfo.parkingTenantName || '尚未出租'}}</text>
				</view>
			</view> 
			<view class="cardItem">
				<view class="cardItemL">
					<text class="iconfont icon-icon-test24"></text>
					<text>电话号码</text>
				</view>
				<view class="cardItemR">
					<text>{{packingInfo.parkingTenantPhone || '尚未出租'}}</text>
				</view>
			</view> 
		</view>
		<view class="bottomButton">
			<view class="rental"  @click="saleOrRental(0)" :style="{background:rentalColor}">
				{{packingInfo.rentOut == 1 ? '取消出租' : '我要出租'}}
			</view>
			<view class="sale" @click="saleOrRental(1)" :style="{background:saleColor}">
				{{packingInfo.sale == 1 ? '取消出售' : '我要出售'}}
			</view>
		</view>
		<fui-dialog 
			:show="show" 
			title="操作失败" 
			:content="message"
			:buttons="buttons"
			:maskClosable="true"
			 @click="onTap"></fui-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rentalColor: '#09BE4F',
				saleColor: '#09BE4F',
				packingInfo:{
					id: '',
					parkingNum: '',
					parkingOwnerSignkey: '',
					parkingOwnerName: '',
					parkingOwnerPhone: '',
					packingTenantSignkey: '尚未出租',
					parkingTenantName: '尚未出租',
					parkingTenantPhone: '尚未出租',
					parkingType: '',
					state: 0,
					sale: 0,
					rentOut: 0
				},
				message: '',
				show: false,
				buttons: [{
					text: '确定',
					color: '#FF2B2B'
				}],
				userInfo:{},
				packingId:'91938f45-2256-4e81-ae73-a10e023b290d'
			};
		},
		onLoad(opt) {
			this.packingId = opt.packingId
			this.getUserInfo()
			this.getPackingInfo(opt.packingId)
		},
		methods:{
			setButtonColor(){
				if(this.packingInfo.rentOut == 1){
					this.rentalColor = '#FF2B2B'
				}else{this.rentalColor = ''}
				
				if(this.packingInfo.sale == 1){
					this.saleColor = '#FF2B2B'
				}else{this.saleColor = ''}
			},
			onTap(){this.show=false},
			saleOrRental(type){
				// console.log("tap",this.userInfo.signKey,this.packingId,type)
				this.$myReq({
					url:`/owner/packing/changeRentSaleStatus/${this.userInfo.signKey}/${this.packingId}/${type}`,
					method:'put'
				})
				.then((res) => {
					// console.log(res)
					this.getPackingInfo(this.packingId)
				})
				.catch((err) => {
					// console.log(err.message)
					this.message = err.message
					this.show = true
				})
			},
			//获得车位信息
			getPackingInfo(packingId){
				this.$myReq({
					url:`/owner/packing/getPackingById/${packingId}`,
					// url:`/owner/packing/getPackingById/91938f45-2256-4e81-ae73-a10e023b290d`
				})
				.then((res) => {
					// console.log(res)
					this.packingInfo = res.data
					this.setButtonColor()
				})
			},
			//获得用户信息
			getUserInfo(){
				const token = uni.getStorageSync("userToken")
				// console.log(token)
				this.$myReq({
					url: '/owner/login/loginUserInfo/' + token,
					method:'GET'
				})
				.then((res) => {
					// console.log(res.data.signKey)
					this.userInfo = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.card{
	margin: 20rpx 30rpx 20rpx 30rpx;
	// padding: 10rpx 30rpx;
	// border: 1px solid red;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 2rpx 2rpx 2rpx 3rpx #d9d9d9;
	padding-bottom: 20rpx;
	.cardTitle{
		border-bottom: 4rpx solid #f6f6f6;
		padding: 20rpx 30rpx;
		height: 50rpx;
		text:nth-child(1){
			font-size: 40rpx;
			margin-right: 10rpx;
			line-height: 50rpx;
		}
		text:nth-child(2){
			font-size: 35rpx;
			line-height: 50rpx;
		}
	}
	.cardItem{
		margin: 10rpx 30rpx;
		// border: 1px solid red;
		border-bottom: 1rpx solid #f6f6f6;
		height: 70rpx;
		display: flex;
		.cardItemL{
			// border: 1px solid red;
			text-align: center;
			width: 200rpx;
			color: $main-colorA;
			text:nth-child(1){
				font-size: 35rpx;
				margin-right: 10rpx;
				line-height: 70rpx;
			}
			text:nth-child(2){
				font-size: 30rpx;
				line-height: 70rpx;
			}
		}
		.cardItemR{
			width: 330rpx;
			padding-left: 100rpx;
			// text-align: center;
			text{
				font-size: 30rpx;
				line-height: 70rpx;
			}
		}
	}
}
.Parking{
	.saleRentalStatus{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 10rpx 30rpx;
		padding: 10rpx 0rpx 0rpx 0rpx;
		// border: 1px solid red;
		view{
			// border: 1px solid blue;
			width: 270rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			border-radius: 20rpx;
			color: #FFFFFF;
		}
		.saleStatus{
			background-color: #6831FF;
		}
		.rentalStatus{
			background-color: #465CFF;
		}
	}
}
.Rental{
	margin-bottom: 150rpx;
}
.bottomButton{
	// border: 1px solid red;
	padding: 30rpx 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	position: fixed;
	background-color: #FFFFFF;
	bottom: 0rpx;
	width: 690rpx;
	view{
		// border: 1px solid red;
		width: 270rpx;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 35rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
	}
	.rental{
		background-color: #09BE4F;
	}
	.sale{
		background-color: #09BE4F;
	}
}
</style>
